@import "../../styles/colors.scss";

.todoist-query-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .todoist-query-title {
    font-size: 1.25em;
  }

  .todoist-query-controls {
    display: flex;
    align-items: center;
    justify-content: end;

    * + * {
      margin-left: 0.5em;
    }

    .todoist-query-control-button {
      padding: var(--size-2-2) var(--size-2-3);
      color: var(--text-muted);
      border-radius: var(--radius-s);
      border: 1px solid var(--color-base-40);
      box-shadow: none;

      transition: opacity 0.33s;
      opacity: 0;

      .block-language-todoist:hover & {
        opacity: 1;
      }

      &:hover {
        background-color: inherit;
        border: 1px solid var(--interactive-accent);
      }

      .markdown-reading-view &.edit-query {
        display: none;
      }

      &.refresh-query.is-refreshing > .obsidian-icon {
        @-webkit-keyframes spin {
          100% {
            -webkit-transform: rotate(360deg);
          }
        }

        animation: spin 1s linear infinite reverse;
      }
    }
  }
}

.todoist-query-warnings {
  --todoist-callout-color: rgba(var(--color-yellow-rgb), 0.2);
}

.todoist-tasks-list {
  margin-top: 1em;

  .todoist-tasks-list {
    margin-top: 0em;
    margin-left: 2em;

    & + .todoist-task-container {
      border-top: none;
    }

    .todoist-task-container:first-child {
      border-top: none;
    }
  }
}

.todoist-task-container {
  display: flex;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--todoist-task-separator-color);

  &:first-child {
    border-top: 1px solid var(--todoist-task-separator-color);
  }

  &[data-priority="1"] {
    --todoist-checkbox-border: var(--todoist-p4-border);
    --todoist-checkbox-border-hover: var(--todoist-p4-border-hover);
    --todoist-checkbox-background: var(--todoist-p4-background);
  }
  &[data-priority="2"] {
    --todoist-checkbox-border: var(--todoist-p3-border);
    --todoist-checkbox-border-hover: var(--todoist-p3-border-hover);
    --todoist-checkbox-background: var(--todoist-p3-background);
  }
  &[data-priority="3"] {
    --todoist-checkbox-border: var(--todoist-p2-border);
    --todoist-checkbox-border-hover: var(--todoist-p2-border-hover);
    --todoist-checkbox-background: var(--todoist-p2-background);
  }
  &[data-priority="4"] {
    --todoist-checkbox-border: var(--todoist-p1-border);
    --todoist-checkbox-border-hover: var(--todoist-p1-border-hover);
    --todoist-checkbox-background: var(--todoist-p1-background);
  }

  .todoist-task-checkbox {
    margin-top: 3px;

    div {
      height: 16px;
      width: 16px;
      border-radius: 50%;
      border: 1px solid var(--todoist-checkbox-border);
      background-color: var(--todoist-checkbox-background);

      &:hover {
        border: 1px solid var(--todoist-checkbox-border-hover);
      }
    }
  }

  .todoist-task {
    margin-left: 0.5em;
    width: 100%;

    .todoist-task-description {
      font-size: var(--font-small);
      color: var(--text-muted);
    }

    .todoist-task-metadata {
      display: flex;
      justify-content: space-between;
      font-size: var(--font-smaller);
      margin-top: 0.25em;
      color: var(--text-muted);

      & > div {
        display: flex;

        & > * + * {
          margin-left: 1em;
        }
      }

      .task-metadata-item {
        display: flex;
        align-items: center;

        & > * + * {
          margin-left: 0.25em;
        }

        &[data-task-metadata-kind="project"] .obsidian-icon {
          color: var(--todoist-project-color);
        }

        &[data-task-metadata-kind="labels"] {
          color: var(--todoist-label-color);
        }

        @each $name, $color in $todoist-colors {
          &[data-project-color="#{$name}"] {
            --todoist-project-color: var(--todoist-#{$name});
          }

          &[data-label-color="#{$name}"] {
            --todoist-label-color: var(--todoist-#{$name});
          }
        }
      }
    }
  }

  &[data-due-metadata="overdue"] {
    .task-metadata-item[data-task-metadata-kind="due"] {
      color: var(--todoist-red);
    }
  }
}

.todoist-group + .todoist-group {
  margin-top: 2em;
}

.todoist-group-title {
  margin: 1em 0;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  outline: none;

  &.collapsed {
    border-bottom: 1px solid var(--todoist-task-separator-color);
    margin-bottom: 0;
    padding-bottom: 0.5em;
  }

  .todoist-group-collapse-icon {
    flex-shrink: 0;
    transition: all 0.2s ease;
    border-radius: 3px;
    padding: 2px;
  }

  &:focus .todoist-group-collapse-icon {
    background-color: var(--interactive-hover);
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
  }

  &:hover .todoist-group-collapse-icon {
    background-color: var(--interactive-hover);
  }
}

.todoist-no-tasks {
  --todoist-callout-color: rgba(var(--color-green-rgb), 0.2);
}

.todoist-query-error {
  --todoist-callout-color: rgba(var(--color-red-rgb), 0.2);
}
